<template>
  <div class="wrapp">
    <div class="head">
      <div class="title">项目新增</div>
    </div>
    <div class="banner">
      <i-form>
        <form-item label="项目名称" :required="true">
          <Input style="width:200px;" v-model="projectName" />
        </form-item>
        <form-item label="项目编号" :required="true">
          <Input style="width:200px;" v-model="projectNum" />
        </form-item>
        <form-item label="项目类型" :required="true">
          <RadioGroup v-model="selectData" type="button">
            <Radio :label="item" v-for="(item,ind) in type" :key="ind" style="margin-right:5px;"></Radio>
          </RadioGroup>
        </form-item>
        <form-item label="周期结算" :required="true">
          <InputNumber style="width:400px" v-model="allotPeriod"></InputNumber>
        </form-item>
        <form-item label="归属矿场" :required="true">
          <Select v-model="minerField" style="width:100px">
            <Option v-for="item in minerFieldList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </form-item>
        <form-item label="项目发起人" v-show="selectData=='共建'">
          <Select v-model="owner" filterable remote :remote-method="userSearch" :loading="ownerLoading" style="width:400px;">
            <Option v-for="(option, index) in ownerList" :value="option.userId" :key="index">{{option.name}}/{{option.mobile}}</Option>
          </Select>
        </form-item>
      </i-form>
    </div>
    <div class="foot">
      <Button type="primary" @click="sub">提交</Button>
    </div>
  </div>
</template>

<script>
import apis from "../../util/apis.js";
import qs from "qs";

export default {
  name: "AddProject",
  data() {
    return {
      minerFieldList: [
        {
          value: '01',
          label: '无锡矿场'
        },
        {
          value: '02',
          label: '常州矿场'
        },
        {
          value: '03',
          label: '贵州矿场'
        },
        {
          value: '04',
          label: '四川矿场'
        },
        {
          value: '05',
          label: '鄂尔多斯矿场'
        },
        {
          value: '99',
          label: '自建矿场'
        },
      ],
      allotPeriod: 360,
      type: ["通用", "节点", "共建", "共建2", "算力"],
      typeNum: "",
      selectData: "通用",
      owner: null,
      projectName: null,
      projectNum: null,
      isShow: false,
      settingValue: null,
      ownerLoading: false,
      ownerList: []
    };
  },

  methods: {
    userSearch(keyword) {
      if (keyword !== "") {
        this.ownerLoading = true;
        let token = this.$localStorage.storageGet("TOKEN");
        if (!token) {
          this.$router.push({
            name: "Login"
          });
          return;
        }
        this.$axios({
          method: "get",
          url: apis.addUserApi,
          headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer " + token
          },
          data: qs.stringify({ keyword: keyword })
        })
          .then(res => {
            this.ownerList = res.data;
            this.ownerLoading = false;
          })
          .catch(err => {
            this.$Message.error(err.response.data.message);
          });
      } else {
        this.ownerList = [];
      }
    },
    sub() {
      if (!this.projectName) {
        this.$Message.warning("请输入项目名称!");
        return;
      }
      if (!this.projectNum) {
        this.$Message.warning("请输入项目编号!");
        return;
      }
      if (!this.allotPeriod) {
        this.$Message.warning("请输入结算周期!");
        return;
      }
      if (!this.minerField) {
        this.$Message.warning("请选择矿场!");
        return;
      }
      if (!this.selectData) {
        this.$Message.warning("请选择项目类型!");
        return;
      } else {
        if (this.selectData == "共建") {
          if (!this.owner) {
            this.$Message.info("共建项目还未绑定发起人");
            return;
          }
        }
      }
      let phone = "";
      let Name = "";
      this.ownerList.forEach(element => {
        if (element.userId == this.owner) {
          phone = element.mobile;
          Name = element.name;
        }
      });

      this.$Modal.confirm({
        title: "确认提交信息",
        content:
          "<div>项目名称：" +
          this.projectName +
          "</div>" +
          "<div>项目编号：" +
          this.projectNum +
          "</div>" +
          "<div>项目类型：" +
          this.selectData +
          "</div>" +
          "<div>结算周期：" +
          this.allotPeriod +
          "</div>" +
          "<div>归属矿场：" +
          this.minerField +
          "</div>" +
          "<div>发起人:" +
          phone +
          "/" +
          Name,
        onOk: () => {
          let payload = {};
          if (this.selectData == "通用") {
            this.typeNum = 1;
          } else if (this.selectData == "节点") {
            this.typeNum = 2;
          } else if (this.selectData == "共建") {
            this.typeNum = 3;
            payload.owner = this.owner;
          } else if (this.selectData == "共建2") {
            this.typeNum = 5;
            payload.owner = this.owner;
          } else {
            this.typeNum = 4;
          }
          if (this.owner) {
            payload = {
              owner: this.owner,
              type: this.typeNum,
              projectName: this.projectName,
              projectNumber: this.projectNum,
              allotPeriod: this.allotPeriod,
              minerField: this.minerField
            };
          } else {
            payload = {
              type: this.typeNum,
              projectName: this.projectName,
              projectNumber: this.projectNum,
              allotPeriod: this.allotPeriod,
              minerField: this.minerField
            };
          }

          let token = this.$localStorage.storageGet("TOKEN");
          if (!token) {
            this.$router.push({
              name: "Login"
            });
            return;
          }

          this.$axios({
            method: "post",
            url: apis.projectAdd,
            headers: {
              "Content-Type": "application/json",
              Authorization: "Bearer " + token
            },
            data: payload
          })
            .then(res => {
              if (res.status == "201") {
                this.$Message.success("新建项目成功!");
                this.$router.push({
                  name: "ProjectList"
                });
              } else {
                this.$Message.error(res.data.detail);
              }
            })
            .catch(err => {
              this.$Message.error(err.response.data.message);
            });
        },
        onCancel: () => {
          this.$Message.info("已取消提交");
        }
      });
    }
  }
};
</script>
<style scoped>
.wrapp {
  padding: 0 20px;
}

.head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
}

.banner {
  margin-top: 20px;
}

.title {
  color: #666;
  font-size: 24px;
}

.item {
  margin-top: 15px;
  display: flex;
}

.itemTitle {
  width: 150px;
  text-align: left;
  margin-right: 20px;
  font-size: 20px;
}

.foot {
  margin-top: 20px;
}
</style>